<template>
	<view class="page">
		<view class="wrap">
			<view class="tatle">请如实填写机构真实信息</view>
			<view class="item" style="margin-bottom: 73rpx;">
				<view class="item_tatle"><span>*</span>随访模板</view>
				<view>
					<picker @change="bindPickerChange" :value="index" :range="array_name">
						<view class="item_picker">
							<view v-if="!array[index]" class="uni_input">选择随访模板</view>
							<view v-else>{{ array[index].name }}</view>
							<image
								src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/follow_plan/follow_search.png"
								mode="scaleToFill" />
						</view>
					</picker>
				</view>
			</view>
			<view class="item">
				<view class="item_tatle"><span>*</span>选择患者</view>
				<view @click="prop_on">
					<!-- <picker @change="bindPickerChange" :value="index" :range="array_name"> -->
					<view class="item_picker">
						<view v-if="!items_checked.length" class="uni_input">请选择</view>
						<view>{{ items_checked.toString() }}</view>
						<image
							src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/follow_plan/arrow_right.png"
							mode="scaleToFill" />
					</view>
					<!-- </picker> -->
				</view>
			</view>
			<view class="prompt">
				<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/follow_plan/ic_prompt.png"
					mode="scaleToFill" />
				<view>可以一次性选择多个患者，若关注公众号，则无法收到随访内容</view>
			</view>
			<view class="item">
				<view class="item_tatle"><span>*</span>推送次数</view>
				<view class="time">
					<input type="Number" v-model="totalNum" placeholder="输入" class="time_inp">
					<view>次，每次间隔</view>
					<input type="Number" v-model="cycleDay" placeholder="输入" class="time_inp">
					<view>天</view>
				</view>
			</view>
			<view class="prompt">
				<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/follow_plan/ic_prompt.png"
					mode="scaleToFill" />
				<view>此处设置推送频率及推送次数</view>
			</view>
			<view class="item">
				<view class="item_tatle"><span>*</span>初次日期</view>
				<view>
					<picker mode="date" :value="firstDate" fields="day" :start="maxTime" @change="bindDateChange">
						<view class="item_picker">
							<view v-if="!firstDate" class="uni_input">选择计划日期</view>
							<view v-else>{{ firstDate }}</view>
							<image
								src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/follow_plan/ic_Calendar.png"
								mode="scaleToFill" />
						</view>
					</picker>
					<view class="time_single">
						<view @click="on_manyTime(1)" :class="manyTime == 1 ? 'pick' : ''">1天后</view>
						<view @click="on_manyTime(3)" :class="manyTime == 3 ? 'pick' : ''">3天后</view>
						<view @click="on_manyTime(7)" :class="manyTime == 7 ? 'pick' : ''">7天后</view>
					</view>
				</view>
			</view>
			<view class="prompt">
				<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/follow_plan/ic_prompt.png"
					mode="scaleToFill" />
				<view>初次推送日期除立即发送外，随访发送时间为计划日期上午9:00</view>
			</view>
		</view>
		<view class="submit">
			<button @click="submit">提交申请</button>
		</view>

		<!-- <picker mode="date" :value="firstDate" fields="month" :start="maxTime" @change="bindDateChange">
			<view>{{ date }}</view>
		</picker> -->

		<!-- 选择患者弹窗 -->
		<view class="prop" v-if="prop">
			<view>
				<scroll-view show-scrollbar="false" class="prop_list" scroll-y>
					<!-- <u-empty-state v-if="items.length == 0" value="" style=""></u-empty-state> -->
					<view style="text-align: center;" v-if="!items.length">暂无相关记录</view>
					<checkbox-group @change="checkboxChange">
						<label class="check_item" v-for="item in items" :key="item.patientName">
							<view>
								<checkbox :value="item.patientName" :checked="item.checked" />
							</view>
							<view>{{ item.patientName }}</view>
						</label>
					</checkbox-group>
				</scroll-view>

				<button @click='prop_off'>关闭</button>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		const currentDate = this.getDate(0)
		// const currentDate = '2022-7-29';
		return {
			array: [],  //随访模板所有信息
			index: -1,  //选中模板下标
			prop: false,  //患者弹窗开关
			items: [{
				patientId: "",
				patientName: "",
				patientPhone: "",
				sex: "",
				age: "",
				avatar: "",
				userPhone: "",
				username: ""
			},
			],
			totalNum: '',  //推送次数
			cycleDay: '',  //每次隔几天
			firstDate: '',  //第一次推送的时间
			manyTime: 0,  //多N天
			maxTime: currentDate  //开始时间
		}
	},
	components: {
	},
	computed: {
		// 模板选项
		array_name() {
			return this.array.map(item => item.name)
		},
		// 选中患者数组
		items_checked() {
			let arr_1 = this.items.filter(e => {
				return e.checked
			})
			let arr = arr_1.map(item => {
				if (item.checked) {
					return item.patientName
				}
			})
			// console.log(arr)
			return arr
		},
		// 选中患者id下标数组
		items_idList() {
			let arr_1 = this.items.filter(e => {
				return e.checked
			})
			let arr = arr_1.map(item => {
				if (item.checked) {
					return item.patientId
				}
			})
			return arr
		}
	},
	onShow() {
		this.getDate(1)
		this.getFollowList()
		this.getPatientList()
	},
	methods: {
		bindPickerChange: function (e) {
			this.index = e.detail.value
		},
		// 获取随访模板列表
		getFollowList() {
			this.$api.getFollowList().then(e => {
				const { code, result: { records } } = e
				if (code == 200) {
					this.array = records
				}
			})
		},
		// 开户弹窗
		prop_on() {
			this.prop = true
		},
		// 关闭弹窗
		prop_off() {
			this.prop = false
		},
		// 添加选中
		checkboxChange: function (e) {
			var items = this.items,
				values = e.detail.value;
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i]
				if (values.includes(item.patientName)) {
					this.$set(item, 'checked', true)
				} else {
					this.$set(item, 'checked', false)
				}
			}
		},
		// 时间切换
		bindDateChange(e) {
			this.firstDate = e.detail.value
			this.manyTime = 0
		},
		// 提交
		submit() {
			if (this.index != -1 && this.items_idList && this.totalNum && this.cycleDay && this.firstDate) {
				const formData = {
					tempId: this.array[this.index].id,
					patientIds: this.items_idList,
					totalNum: Number(this.totalNum),
					cycleDay: Number(this.cycleDay),
					firstDate: this.firstDate
				}
				this.$api.FollowPlanAdd(formData).then(e => {

					if (e.code == 200) {
						uni.showToast({
							title: '成功',
							icon: 'none'
						});
						uni.navigateBack({
							delta: 1,//返回层数
						})
					} else {
						uni.showToast({
							title: e.message,
							icon: 'none'
						});
					}
				})
			} else {
				uni.showToast({
					title: '必填项不能为空',
					icon: 'none'
				});
			}
		},
		// 便捷时间
		on_manyTime(type) {
			this.manyTime = type
			const date = new Date();
			date.setDate(date.getDate() + type);//获取type天后的日期
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			this.firstDate = `${year}-${month}-${day}`;
		},
		// 当前日期 + type天
		getDate(type) {
			const date = new Date();
			date.setDate(date.getDate() + type);//获取type天后的日期
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			this.firstDate = `${year}-${month}-${day}`;
			return `${year}-${month}-${day}`;
		},
		// 患者列表
		getPatientList() {
			this.$api.getPatientList().then(e => {

				const { code, result } = e
				if (code == 200) {
					this.items = result
				}
			})
		}
	}
}
</script>

<style lang="less">
@import './followAdd.less';
</style>
